<template>
	<div class="content">
		<CheckboxGroup v-model="groups" class="groups">
			<Checkbox :label="group.id" v-for="group in groupsList" :key="group.id" border class="group">
				<span>{{ group.name }}</span>
			</Checkbox>
		</CheckboxGroup>
	</div>
</template>

<script>
// import Vue from 'vue';
// import i18n from '../../../static/lang/i18n';
export default {
	name: 'GroupList',
	data() {
		return {
			groups: []
		};
	},
	props: {
		groupsList: {
			type: Array
		}
	},
	computed: {},
	methods: {},
	mounted() {}
};
</script>

<style scoped>
.groups {
	display: flex;
	flex-flow: column;
}
.group {
	padding: 10px;
}
.radio {
	width: 100%;
	font-size: 17px;
	margin-left: 15px;
	margin-top: 10px;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}
</style>
